<template>
  <div class="user-manage-container">
    <el-card class="header">
      <div class="search-container">
        <el-form
          :inline="true"
          size="default"
          label-position="left"
          :model="serarchForm"
          ref="searchFormRef"
        >
          <!--          <el-form-item-->
          <!--            label="姓名:"-->
          <!--            prop="username">-->
          <!--            <el-input type="text" name="username"  placeholder="请输入姓名" v-model="serarchForm.username"/>-->
          <!--          </el-form-item>-->
          <!--          <el-form-item label="联系方式:" prop="telephone">-->
          <!--            <el-input type="text" name="telephone"   placeholder="请输入联系方式" v-model="serarchForm.telephone"/>-->
          <!--          </el-form-item>-->
          <el-form-item>
            <el-button type="primary" size="default" @click="searchClick">
              <el-icon>
                <component :is="`el-icon-${toLine('Search')}`" />
              </el-icon>
              <span>搜索</span>
            </el-button>
          </el-form-item>
          <el-form-item>
            <el-button size="default" @click="resetClick(searchFormRef)">
              <span>重置</span>
            </el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="tools">
        <!--        <el-button type="primary" size="default" v-permission="['user.add']" @click="addUser">-->
        <!--          <el-icon>-->
        <!--            <el-icon-plus></el-icon-plus>-->
        <!--          </el-icon>-->
        <!--          <span>添加用户</span>-->
        <!--        </el-button>-->
        <!--        <el-button type="primary" v-permission="['user.excelImport']" @click="onImportExcelClick">-->
        <!--          <el-icon>-->
        <!--            <el-icon-uploadfilled></el-icon-uploadfilled>-->
        <!--          </el-icon>-->
        <!--          <span>{{$t('msg.excel.importExcel')}}</span>-->
        <!--        </el-button>-->
        <!--        <el-button type="success" v-permission="['user.excelExport']" @click="onToExcelClick">-->
        <!--          <el-icon>-->
        <!--            <el-icon-download></el-icon-download>-->
        <!--          </el-icon>-->
        <!--          <span>{{$t('msg.excel.exportExcel')}}</span>-->
        <!--        </el-button>-->
      </div>
      <history-drawer v-model:drawer="drawer" v-model:instanceId="instanceId" />
    </el-card>
    <!--  table  -->
    <el-card>
      <el-table :data="tableData" border style="width: 100%">
        <!--    索引    -->
        <el-table-column label="#" type="index"></el-table-column>
        <!--    姓名    -->
        <el-table-column prop="id" label="id"> </el-table-column>
        <el-table-column prop="name" label="名称"> </el-table-column>
        <el-table-column prop="status" label="状态"> </el-table-column>
        <el-table-column prop="processDefinitionId" label="流程定义Id"> </el-table-column>
        <el-table-column prop="processDefinitionKey" label="流程定义Key"> </el-table-column>
        <el-table-column prop="startDate" label="startDate"> </el-table-column>
        <el-table-column prop="processDefinitionVersion" label="流程定义版本"> </el-table-column>

        <!--    操作    -->
        <el-table-column label="操作" fixed="right" width="400">
          <template #default="{ row }">
            <el-button type="primary" size="default" @click="onChangeStatusClick(row)">
              <!--              <el-icon>-->
              <!--                <component :is="`el-icon-${toLine('View')}`" />-->
              <!--              </el-icon>-->
              <span>{{ row.status == 'RUNNING' ? '挂起' : '激活' }}</span>
            </el-button>
            <el-button type="warning" size="default" @click="onShowClick(row.id)">
              <el-icon>
                <component :is="`el-icon-${toLine('Crop')}`" />
              </el-icon>
              <span>历史</span>
              <history-drawer v-model:drawer="drawer" v-model:instanceId="instanceId" />
            </el-button>
            <el-button type="warning" size="default" @click="onShowTableClick(row.id)">
              <el-icon>
                <component :is="`el-icon-${toLine('View')}`" />
              </el-icon>
              <span>历史</span>
            </el-button>
            <el-button
              type="danger"
              size="default"
              v-permission="['user.delete']"
              @click="onRemoveClick(row)"
            >
              <el-icon>
                <component :is="`el-icon-${toLine('Delete')}`" />
              </el-icon>
              <span>删除</span>
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="pagination"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-size="pageSize"
        :page-sizes="[5, 10, 15, 20]"
        layout="total,sizes,prev,pager,next,jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>
  </div>
</template>

<script setup lang="ts">
  import { reactive, ref, watch, onActivated } from 'vue'
  import historyDrawer from './history/info/index.vue'
  import {
    processInstanceResume,
    processInstanceSuspend,
    processInstanceDelete,
    processInstanceList
  } from '../../../../api/process'
  import { watchSwitchLang } from '../../../../utils/i18n'

  import { useRouter } from 'vue-router'
  import { FormInstance } from 'element-plus'
  import { toLine } from '../../../../utils'
  const router = useRouter()
  // 数据相关对象
  const tableData = ref([])
  const total = ref(0)
  const currentPage = ref(1)
  const pageSize = ref(10)
  const serarchForm = reactive({
    username: '',
    telephone: ''
  })
  /**
   * 获取数据的方法
   */
  const getListData = async () => {
    // console.log(serarchForm)
    if (serarchForm.username !== '' || serarchForm.telephone !== '') {
      const payLoad = {
        condition: serarchForm,
        page: {
          currentPage: currentPage.value,
          pageSize: pageSize.value
        }
      }
      const result = await processInstanceList(payLoad)
      tableData.value = result.list
      total.value = result.total
    } else {
      const payLoad = {
        page: {
          currentPage: currentPage.value,
          pageSize: pageSize.value
        }
      }
      const result = await processInstanceList(payLoad)
      console.log(result)
      tableData.value = result.list
      total.value = result.total
    }
  }
  watchSwitchLang(getListData())
  const handleSizeChange = (size: number) => {
    pageSize.value = size
    getListData()
  }
  const handleCurrentChange = (page: number) => {
    currentPage.value = page
    getListData()
  }
  // 搜索
  const searchClick = () => {
    getListData()
  }
  const searchFormRef = ref<FormInstance>()
  const resetClick = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
  }
  // 查看用户详情
  const onChangeStatusClick = async (row: any) => {
    const { id, status } = row
    const postData = {
      processInstanceId: id
    }
    if (status === 'RUNNING') {
      await processInstanceSuspend(postData)
    } else {
      await processInstanceResume(postData)
    }
    getListData()
  }
  // 为用户分配角色
  const rolesDialogVisible = ref(false)
  const selectUserId = ref('')
  const drawer = ref(false)
  const instanceId = ref('')
  const onShowClick = (id: string) => {
    drawer.value = true
    instanceId.value = id
  }
  const onShowTableClick = (id: string) => {
    router.push(`/process/activiti/history/${id}`)
  }
  const onRemoveClick = async (row: any) => {
    const { id, status } = row
    const postData = {
      processInstanceId: id,
      deleteReason: '删除理由!'
    }
    await processInstanceDelete(postData)
    await getListData()
  }

  // 保证每次打开dialog 都能重新获取数据
  watch(rolesDialogVisible, (value) => {
    if (!value) selectUserId.value = ''
  })
  // 用户导出
  const exportToExcelVisible = ref(false)
  const onToExcelClick = () => {
    console.log('onToExcelClick')
    exportToExcelVisible.value = true
  }
  // 导入
  const onImportExcelClick = () => {
    router.push('/user/import')
  }

  // 处理导入用户后数据不重新加载的问题
  onActivated(getListData)
</script>
<style lang="scss" scoped>
  .user-manage-container {
    .header {
      margin-bottom: 22px;
      //text-align: right;
      .search-container {
        float: left;
      }
      .tools {
        float: right;
      }
    }
    :deep(.avatar) {
      width: 20px;
      height: 20px;
      border-radius: 2%;
    }
    :deep(.el-tag) {
      margin-right: 6px;
    }
  }
  .pagination {
    margin-top: 20px;
    text-align: center;
  }
</style>
